<template>
    <div class="home">
        <h2>一辆{{car.brand}}车,价值{{car.price}}万</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <h2>游戏列表</h2>
        <ul>
            <li v-for="g in games" :key="g.id">{{g.name}}</li>
        </ul>
        <button @click="changeFirstGame">修改第一个游戏名字</button>
        <h2>测试：{{obj.a.b.c}}</h2>
        <button @click="changeObj">修改c</button>
    </div>
</template>


<script setup lang="ts" name = "Page13">
import { reactive,readonly } from 'vue';
   let car =  reactive({brand:'奔驰',price:100}) // readonly
   console.log(car)
   function changePrice() {
    car.price +=10
   }

   let games = reactive([
    {id:'10001',name:'王者荣耀'},
    {id:'10002',name:'原神'},
    {id:'10003',name:'三国志'},
   ])
   console.log(games)
   function changeFirstGame(){
    games[0].name="飞车"
    console.log(games)
   }
  let obj=reactive({
    a:{
        b:{
            c:100
        }
    }
  })
  console.log(obj)
  function changeObj(){
    obj.a.b.c=999
  }
</script>

<style lang="scss" scoped>

</style>